<template>
	<div class="app">
		<div class="left">
			<boardUser />
		</div>
		<div class="center">
			<div class="main">
				<div class="grids">
					<div class="grid" v-for="item in 196" :key="item">{{ item }}</div>
				</div>
				<div class="grids2">
					<div class="grid2" v-for="(status, index) in gamestatus.gridStatus" :key="index">
						<div class="piece" @click="action(index)" :style="setPieceColor(index, status)"></div>
					</div>
				</div>
				<div class="btns">
					<router-link to="/"> 棋盘 </router-link>
					<router-link to="/home"> home </router-link>
					<router-link to="/login"> login </router-link>
					<router-link to="/login/login"> 登录 </router-link>
					<router-link to="/login/reg"> 注册 </router-link>
					<router-link to="/lobby"> 大厅 </router-link>
				</div>
			</div>
		</div>
		<div class="right">
			<boardChat />
		</div>
    <gameOver/>
	</div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import useGamestatus from "../stores/game";

import boardUser from "../components/boardUser.vue";
import boardChat from "../components/boardChat.vue";
import gameOver from "../components/gameOver.vue";

const gamestatus = useGamestatus();

gamestatus.init();
// const socket = io(serverUrl.serverUrl);
const socket = gamestatus.socket;

// let gridStatus = ref(Array.from({ length: 225 }, () => ({ clicked: false, color: null })));
let gridStatus = gamestatus.gridStatus;
let i = ref(0);
let blackAction = ref(true);
let myAction = ref(true);
let wait = ref(false);
let blackPieceStyle = { backgroundColor: "#000000", boxShadow: "rgb(218, 218, 218) 5px 5px 10px inset,rgb(165,165,165) 3px 3px 5px", width: "80%" };
let whitePieceStyle = { backgroundColor: "rgb(230,230,230)", boxShadow: "rgb(255, 255, 255) 3px 3px 5px inset,rgb(165,165,165) 3px 3px 5px", width: "80%" };
// const toggleGridColor = (index,color) => {
//     // 切换指定索引的网格颜色状态
// //   if (gridStatus.value[index].clicked) return;
// //   gridStatus.value[index].clicked = true;
// //   if (blackAction.value) {
// //     gridStatus.value[index].color = "black";
// // } else {
// //     gridStatus.value[index].color = "white";
// // }
// //   blackAction.value = !blackAction.value;
//     myAction.value = !myAction.value;
//     wait.value=false;
//     gridStatus.value[index].clicked = true;
//     gridStatus.value[index].color = color;
// };
const setPieceColor = (index, status) => {
	//棋子颜色样式
	if (status.clicked) {
		if (status.color == "black") {
			return blackPieceStyle;
		} else if (status.color == "white") {
			return whitePieceStyle;
		}
	} else {
		return "";
	}
};
// socket.on("connect", () => {
//     console.log("socket 已连接");
// });
// socket.on("disconnect", () => {
//     console.log("socket 已断开");
// });
// socket.on('message',(data)=>{
//     console.log(data);
//     toggleGridColor(data.index,data.color);
// });
// socket.on('sendRoom',(data)=>{
//     console.log(data);
//     // toggleGridColor(data.index,data.color);
// });
// socket.on('assignedColor',(data)=>{
//     console.log(data);
//     if(data=='black'){
//         return;
//     }else{
//         // blackAction.value=false;
//         myAction.value=false;
//     }
// });
const action = (index) => {
	console.log("action", index);
	if (!gamestatus.gameStart) {
		console.log("请等待游戏开始");
		return;
	}
	if (gamestatus.gridStatus[index].clicked) {
		console.log("这里已经有棋子了");
		return;
	}
	if (!gamestatus.myAction) {
		console.log("请等待对方下棋");
		return;
	}
	if (!gamestatus.wait) {
		gamestatus.wait = true;
		socket.emit("makeMove", gamestatus.myRoomId, index);
	} else {
		console.log("请等待网络响应");
	}
};
</script>
<style scoped>
.app {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: space-between;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: #fff9e6;
  border-radius: 15px;
  border: 2px solid #d4b483;
  margin: 0 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.center:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.main {
  position: relative;
}

.left, .right {
  flex: 3;
  background: #f0f0f0;
  border-radius: 15px;
  border: 2px solid #d4b483;
  padding: 20px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.left:hover, .right:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.grids {
  aspect-ratio: 1/1;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  border: 2px solid #8b4513;
  margin-bottom: 20px;
  background: #f0d9b5;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
  
  & > .grid {
    width: 45px;
    color: rgba(47, 43, 38, 0);
    border: 1px solid #c0a080;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    transition: all 0.2s ease;
    
    &:hover {
      background: rgba(210, 180, 140, 0.3);
    }
  }
}
.grids2 {
  aspect-ratio: 1/1;
  position: absolute;
  left: -22.5px;
  top: -22.5px;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  border: 1px solid transparent;
  
  & > .grid2 {
    width: 45px;
    color: rgba(47, 43, 38, 0);
    border: 1px solid transparent;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    
    & > .piece {
      width: 80%;
      aspect-ratio: 1/1;
      border: 1px solid transparent;
      border-radius: 50%;
      z-index: 999;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:hover {
        border: 2px dashed rgba(0, 0, 0, 0.5);
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      }
    }
  }
	& > .grid2:nth-child(49) {
		& > .piece {
			width: 20%;
			background-color: #000000;
			&:hover {
				border: 1px dashed #000000;
				background-color: #00000000;
				width: 80% !important;
			}
		}
	}
	& > .grid2:nth-child(57) {
		& > .piece {
			width: 20%;
			background-color: #000000;
			&:hover {
				border: 1px dashed #000000;
				background-color: #00000000;
				width: 80% !important;
			}
		}
	}
	& > .grid2:nth-child(113) {
		& > .piece {
			width: 20%;
			background-color: #000000;
			&:hover {
				border: 1px dashed #000000;
				background-color: #00000000;
				width: 80% !important;
			}
		}
	}
	& > .grid2:nth-child(169) {
		& > .piece {
			width: 20%;
			background-color: #000000;
			&:hover {
				border: 1px dashed #000000;
				background-color: #00000000;
				width: 80% !important;
			}
		}
	}
	& > .grid2:nth-child(177) {
		& > .piece {
			width: 20%;
			background-color: #000000;
			&:hover {
				border: 1px dashed #000000;
				background-color: #00000000;
				width: 80% !important;
			}
		}
	}
}
</style>
